<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

<!--父子组件的访问方式（通过对象直接访问的）

	$children和 $refs  相当于是子组件的对象
$children是数组类型  [VueComponent,VueComponent...] 组件对象,一个组件里面就一个VueComponent对象

ES6新语法 for循环  for(let item of items)

$children一般不用    如果在$children数组里面取第二个VueComponent对象可以$children[1]取用，
但是通过下标值取东西非常不好(万一中间插入别的组件（不能硬编码）)



一般都是用 $refs，用的非常多  ，几乎都是用这个

  但是 $refs默认是一个空对象，可以直接打印console.log(this.$refs);看看
所以要使用这个对象的前提 ，在被vue实例接管的标签内使用该组建的时候里面必须有属性 ref=""  这相当于给这个对象娶了个名字	
以后不管你加了多少个子组件，都可以通过这种方式定位到你要的组件（相当于给儿子取名字，通过名字找儿子）
-->







		<template id="cpn">
			<div>我是子组件</div>
		</template>
		<div id="app">
			<cpn></cpn>
			<cpn></cpn>
			<cpn ref="aaa"></cpn>
			<button @click="btnClick">按钮</button>
		</div>

		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const cpn = {
				template: "#cpn",
				data() {
					return {
						name: "我是子组件name"
					}
				},
				methods: {
					showMessage() {
						console.log("我是子组件的方法showMessage");
					}
				}
			}
			const app = new Vue({
				el: '#app',
				data: {
					message: "abc"
				},
				methods: {
					btnClick() {
						// 1.$children
						// console.log(this.$children);
						//调用第一个组件里面的方法（因为父组件中多次调用了相同类型的子组件）
						// this.$children[0].showMessage();
						
						// 2.$refs 对象类型，默认了是一个空的对象 ref="aaa"
						console.log(this.$refs);
						console.log(this.$refs.aaa.name);
						console.log(this.$refs.aaa.showMessage());

						/*
							第二种方式开发时用的较多，
							第一种只是要全局扫描的时候才用到
						*/
					}
				},
				components: {
					cpn
				}
			});
		</script>
	</body>
</html>
